
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('短信模版')}:</label>
        <div class="col-xs-12 col-sm-8">

            <select name="template_id"  data-rule="required" class="form-control" id="template-select">
                {volist name="templates" id="item"}
                <option value="{$item.mtid}" data-desc="{$item.desc}">{$item.name}</option>
                {/volist}
            </select>

        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('详情')}:</label>
        <div class="col-xs-12 col-sm-8">
            <textarea style="height: 100px"  id="c-desc"  class="form-control"  type="text" ></textarea>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('变量')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-param" placeholder="多个请用 , 分开" class="form-control" name="param" type="text" >
        </div>
    </div>



    <input type="hidden" name="ids" value="{$ids}">


    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-primary btn-embossed ">{:__('OK')}</button>
        </div>
    </div>
</form>

<script>    document.addEventListener('DOMContentLoaded', function() {
    // 初始化时设置第一个选项的描述（如果有）
    var templateSelect = document.getElementById('template-select');
    if (templateSelect) {
        updateDescArea(templateSelect.options[templateSelect.selectedIndex]);

        // 监听选择变化
        templateSelect.addEventListener('change', function() {
            updateDescArea(this.options[this.selectedIndex]);
        });
    }

    function updateDescArea(selectedOption) {
        var desc = selectedOption.getAttribute('data-desc');
        var descArea = document.getElementById('c-desc');
        if (descArea) {
            descArea.value = desc || '';
        }
    }
});
</script>